<template>
  <div class="scorAnalysis">
    <img class="bg" :src="$store.state.appBgInfo.default" alt="">
    <div class="title">成绩分析</div>
    <div class="sidebar">
      <div class="sidebar-bg">
        <img class="up" v-if="isUp" src="@/assets/images/dekt/up.png" alt="">
        <img class="down" v-if="isDown" src="@/assets/images/dekt/down.png" alt="">
        <VScrollContainer ref="scrollContainer" :listenShowNav="false">
          <VMultiList
            @scrollTo="scrollTo"
            @scrollFoc="scrollFoc"
            :groupDatas="gradeList"
          >
            <ul>
              <li
                :class="{active: gradeList.focArr[0][index],'holdActive':index == holdIndex}"
                v-for="(item,index) in gradeList.dataArr[0].data"
                :key="index"
              >
                {{item.courseName}}
                <span :data-index="'tar_0_'+index"></span>
                <!-- <router-link to="lesson">{{grade}}</router-link> -->
              </li>
            </ul>
          </VMultiList>
        </VScrollContainer>
      </div>
    </div>

    <div class="chart" v-if="gradeList.focArr[0][0]">
      <img :src="backImg[0]" style="position: absolute;left: 0px;top: 0px;" alt="">
      <div class="chart0">
        <div class="chart-title">
          <span style="margin-left: 34px;">{{gradeList.dataArr[0].data[0].testName + '总分 ' + gradeList.dataArr[0].data[0].courseScore}}</span>
        </div>
        <schart :canvasId="chartObj.canvasId"
                :type="chartObj.type"
                class="wrapper"
                :data="chartObj.data"
                :options="chartObj.options"></schart>
      </div>

      <div class="chart1">
        <div class="chart-title">
          <span style="margin-left: 34px;">学科均衡</span>
        </div>
        <img class="chart-img" :src="chartData[0]" alt="">
        <!--<schart :canvasId="canvasId[0].canvasId"-->
        <!--:type="canvasId[0].type"-->
        <!--class="wrapper"-->
        <!--:data="canvasId[0].data"-->
        <!--:options="canvasId[0].options"></schart>-->
      </div>
      <div class="chart2">
        <div class="chart-title">
          <span style="margin-left: 34px;">成绩波动</span>
        </div>
        <img class="chart-img" :src="chartData[1]" alt="">
      </div>
      <div class="chart3">
        <div class="chart-title">
          <span style="margin-left: 34px;">年级排名</span>
        </div>
        <img class="chart-img" :src="chartData[2]" alt="">
      </div>
    </div>


    <div class="chart" v-if="!gradeList.focArr[0][0]">
      <img :src="backImg[1]" style="position: absolute;left: 0px;top: 0px;" alt="">
      <div class="chart-ctitle">
        <span style="margin-left: 34px;">{{gradeList.dataArr[0].data[focIndex].testName + '-' + gradeList.dataArr[0].data[focIndex].courseName}}</span>
      </div>
      <div class="chart-m">
        <div class="other1">
          <div class="oup">{{gradeList.dataArr[0].data[focIndex].courseScore}}</div>
          <div class="odown">单科成绩</div>
        </div>
        <div class="other2">
          <div class="oup">{{gradeList.dataArr[0].data[focIndex].rank}}</div>
          <div class="odown">年级排名</div>
        </div>
      </div>
      <div class="chart2">
        <div class="chart-title">
          <span style="margin-left: 34px;">成绩波动</span>
        </div>
        <img class="chart-img" :src="chartData[0]" alt="">
      </div>
      <div class="chart3">
        <div class="chart-title">
          <span style="margin-left: 34px;">年级排名</span>
        </div>
        <img class="chart-img" :src="chartData[1]" alt="">
      </div>
    </div>


  </div>
</template>

<script>

  export default {
    name: "scorAnalysis",
    components: {
    },
    data() {
      return {
        holdIndex: -1,
        scrollY: 0,
        backObjName: "scorAnalysis",
        hs: this.$store.state.hs,
        bridge: this.$store.state.bridge,
        isUp: false,
        isDown: false,
        student: this.$store.state.user,
        gradeList: {
          dataArr: [
            {
              maxLine: 1,
              dynamic: false,
              data: []
            }
          ],
          focArr: [[]]
        },
        chartObj: {
          canvasId: 'myCanvas',
          type: 'bar',
          data: this.chartdata(),
          options: {
            showValue: true,
            topPadding: 80,
            bgColor: '#092f41',            // 默认背景颜色
            title: '',                    // 图表标题
            titleColor: '#000000',         // 图表标题颜色
            titlePosition: 'top',        // 图表标题位置: top / bottom
            yEqual: 5,                     // y轴分成5等分
            fillColor: '#1cb060',          // 默认填充颜色
            contentColor: '#eeeeee',       // 内容横线颜色
            axisColor: '#ffffff',          // 坐标轴颜色
          }
        },
        chartData: [],
        focIndex: 0,
        backImg: [
          require('../../assets/images/personal/info/bg1.png'),
          require('../../assets/images/personal/info/bg2.png')
        ]
      }
    },
    methods: {
      chartdata: function () {
        //没数据时候推出
        let temp = []


        setTimeout(() => {
          this.gradeList.dataArr[0].data.slice(1).forEach((item, index) => {
            temp.push({name: item.courseName, value: item.courseScore})
          })
        }, 10)

        return temp
      },
      scroll(pos) {
        this.scrollY = pos.y;
      },
      scrollTo(targetIndex) {
        this.$refs.scrollContainer.scrollTo(targetIndex);
      },
      scrollFoc(obj) {
        if (obj.group == 0) {
          this.holdIndex = -1;
        }
        // obj.objindex > 0 ? this.isUp = true : this.isUp = false
        // obj.objindex === this.gradeList.dataArr[0].data.length - 1 ? this.isDown = false : this.isDown = true
        this.focIndex = obj.objindex
        this.getData(this.focIndex);
        this.hs.areaLastFocus[1] = null;
      },
      setBackObj(backObj) {
        this.hs.cookie.set(this.backObjName, JSON.stringify(backObj));
      },
      getList() {
        this.hs.ajax.get(
          "http://" + this.$store.state.domain + "/SMSCH-STB/score/last" +
          "?username=" + this.student.username,
          data => {
            data = JSON.parse(data);
            console.log(data);
            if (data.head.code === 1) {
              this.gradeList.dataArr[0].data = data.body
              this.gradeList.dataArr[0].data.forEach((item, index) => {
                if (item.courseName === '总分') {
                  var remove = this.gradeList.dataArr[0].data.splice(index, 1)
                  this.gradeList.dataArr[0].data.unshift(remove[0])
                  return
                }
              })
            }
          }, 0, function (msg) {
          }, 3000
        );
      },
      getData(objindex) {
        console.log(objindex);
        this.chartData = []
        // 学科均衡
        if (objindex === 0) {
          this.hs.ajax.get(
            "http://" + this.$store.state.domain + "/SMSCH-STB/score/radar" +
            "?username=" + this.student.username,
            data => {
              data = JSON.parse(data);
              console.log(data);
              if (data.head.code === 1) {
                this.chartData.push(data.body)
              }
            }, 0, function (msg) {
            }, 3000
          );
        }

        // 成绩波动
        this.hs.ajax.post(
          "http://" + this.$store.state.domain + "/SMSCH-STB/score/line",
          "username=" + this.student.username + "&courseName=" + this.gradeList.dataArr[0].data[objindex].courseName,
          data => {
            data = JSON.parse(data);
            console.log(data);
            if (data.head.code === 1) {
              this.chartData.push(data.body)
            }
          }, 0, function (msg) {
          }, 3000
        );

        // 年级排名
        this.hs.ajax.post(
          "http://" + this.$store.state.domain + "/SMSCH-STB/score/line-rank",
          "username=" + this.student.username + "&courseName=" + this.gradeList.dataArr[0].data[objindex].courseName,
          data => {
            data = JSON.parse(data);
            console.log(data);
            if (data.head.code === 1) {
              this.chartData.push(data.body)
            }
          }, 0, function (msg) {
          }, 3000
        );
      },
      getData2(objindex) {
        console.log(objindex);
        this.chartData = []
        // 学科均衡
        if (objindex === 0) {
          this.hs.ajax.get(
            "http://" + this.$store.state.domain + "/SMSCH-STB/score/radar" +
            "?username=" + this.student.username,
            data => {
              data = JSON.parse(data);
              console.log(data);
              if (data.head.code === 1) {
                this.chartData.push(data.body)
              }
            }, 0, function (msg) {
            }, 3000
          );
        }

        // 成绩波动
        this.hs.ajax.post(
          "http://" + this.$store.state.domain + "/SMSCH-STB/score/line-data",
          "username=" + this.student.username + "&courseName=" + this.gradeList.dataArr[0].data[objindex].courseName,
          data => {
            data = JSON.parse(data);
            console.log(data);
            if (data.head.code === 1) {
              this.chartData.push(data.body)
            }
          }, 0, function (msg) {
          }, 3000
        );

        // 年级排名
        this.hs.ajax.post(
          "http://" + this.$store.state.domain + "/SMSCH-STB/score/line-data",
          "username=" + this.student.username + "&courseName=" + this.gradeList.dataArr[0].data[objindex].courseName,
          data => {
            data = JSON.parse(data);
            console.log(data);
            if (data.head.code === 1) {
              this.chartData.push(data.body)
            }
          }, 0, function (msg) {
          }, 3000
        );
      }
    },
    created() {
      this.getList();
      // this.getData(this.gradeList.dataArr[0].data[0]);
    },
    mounted() {

      this.hs.addBlurArea([0], (group, obj, objindex) => {
        this.holdIndex = objindex;
      });

      this.hs.addSelect([0, 1], (group, objid, objindex) => {

      });

      this.hs.initFocus("0-0");

      //  查看是否有记忆焦点
      if (this.hs.cookie.get(this.backObjName)) {
        let backObj = JSON.parse(this.hs.cookie.get(this.backObjName));
        let focArr = backObj.backFocArr;
        this.hs.cookie.delOne(this.backObjName);
        // console.log(JSON.stringify(focArr));
        // alert(focArr[0])
        this.hs.initFocus(focArr[0]);
      }
    }
  }
</script>

<style scoped lang="less">
  .scorAnalysis {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 1920px;
    height: 1080px;
    .title {
      position: absolute;
      left: 1482px;
      top: 78px;
      width: 317px;
      height: 56px;
      line-height: 56px;
      font-size: 56px;
      text-align: center;
      color: #a8e7ff;
    }
    .bg {
      position: absolute;
      left: 0px;
      top: 0px;
    }
    .sidebar {
      position: absolute;
      top: 184px;
      left: 120px;
      width: 240px;
      height: 806px;
      overflow: hidden;
      .sidebar-bg {
        position: absolute;
        width: 240px;
        height: 806px;
        border-radius: 8px;
        background: linear-gradient(#53ceff, #53ceff),
        linear-gradient(#6ec6e8, #6ec6e8);
        .content {
          padding-top: 35px;
        }
        .up {
          position: absolute;
          top: 6px;
          left: 95px;
        }
        .down {
          position: absolute;
          bottom: 20px;
          left: 95px;
        }
        .multi-container {
          text-align: center;
          ul {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin: 0;
            padding-top: 2px;
            li {
              text-align: center;
              margin-bottom: 48px;
              padding: 0;
              list-style: none;
              display: block;
              width: 200px;
              height: 60px;
              line-height: 60px;
              border-radius: 30px;
              // background: #6ec6e8;
              color: #104572;
              font-size: 42px;
              position: relative;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              span {
                position: absolute;
                bottom: -20px;
              }

            }
            li:last-child {
              margin-bottom: 10px;
            }

            .holdActive {
              color: #fbff92;
              background-color: #09508a;
            }
            .active {
              color: #ffffff;
              background: #0e60e9;
              transform: scale(1.1);
              border: 2px solid #fff;
            }
          }
        }
      }
    }
    .chart {
      position: absolute;
      left: 408px;
      top: 184px;
      width: 1392px;
      height: 804px;
      .chart-ctitle {
        position: absolute;
        left: 16px;
        top: 47px;
        width: 1360px;
        height: 46px;
        line-height: 46px;
        font-size: 46px;
        color: #414141;
      }
      .chart-title {
        position: absolute;
        left: 0px;
        top: 0px;
        width: 672px;
        height: 60px;
        background-color: #09508a;
        border-radius: 4px 4px 0px 0px;
        line-height: 60px;
        font-size: 36px;
        color: #53cfff;
      }
      .chart-img {
        position: absolute;
        left: 0px;
        top: 60px;
        width: 672px;
        height: 296px;
      }
      .chart0 {
        position: absolute;
        left: 16px;
        top: 16px;
        width: 672px;
        height: 400px;
        .wrapper {
          position: absolute;
          left: 0px;
          top: 60px;
          width: 672px;
          height: 340px;
        }
      }
      .chart1 {
        position: absolute;
        left: 704px;
        top: 16px;
        width: 672px;
        height: 400px;
      }
      .chart2 {
        position: absolute;
        left: 16px;
        top: 432px;
        width: 672px;
        height: 356px;
      }
      .chart3 {
        position: absolute;
        left: 704px;
        top: 432px;
        width: 672px;
        height: 356px;
      }
      .chart-m {
        position: absolute;
        left: 16px;
        top: 125px;
        width: 1360px;
        height: 291px;
        .other1 {
          position: absolute;
          left: 408px;
          top: 79px;
          width: 140px;
          height: 132px;
        }
        .other2 {
          position: absolute;
          left: 803px;
          top: 79px;
          width: 140px;
          height: 132px;
        }
        .oup {
          position: absolute;
          left: 0px;
          top: 0px;
          width: 140px;
          height: 62px;
          line-height: 62px;
          color: #a83a3a;
          font-size: 62px;
          text-align: center;
        }
        .odown {
          position: absolute;
          left: 0px;
          top: 79px;
          width: 140px;
          height: 62px;
          line-height: 62px;
          font-size: 30px;
          text-align: center;

        }
      }
    }

  }
</style>
